<script src="@/js/paipan/meihua.js"></script>


<template>
    <div class="vue">
        <div class="margins">

            <div class="nodata" v-show="!isData">

                <video ref="videoRef" autoplay loop :muted="true">
                    <source src="@/assets/img/paipan/loading.mp4" type="video/mp4">
                </video>

                <div class="option">

                    <div class="paipan">
                        <Button type="primary" class="button" @click="paiPanMethod">梅花 - 开始排盘</Button>
                    </div>

                    <div class="xy">
                        <div class="name">
                            <Input size="small" v-model="options.name" placeholder="请输入姓名" maxlength="20"
                                show-word-limit />
                        </div>
                        <div class="occupy">
                            <Input size="small" v-model="options.occupy" placeholder="请输入占事" maxlength="20"
                                show-word-limit />
                        </div>
                        <div class="date">
                            <el-date-picker size="small" :clearable="false" v-model="options.date" type="datetime"
                                format="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期" :editable="false"
                                style="width:170px;" />
                            <div class="leapmonth">
                                <el-radio-group size="small" v-model="options.leapMonth"
                                    v-for="item in leapMonthOptions" :key="item">
                                    <el-radio-button :label="item.label" :value="item.value" />
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="datetype">
                            <el-radio-group size="small" v-model="options.dateType" v-for="item in dateTypeOptions"
                                :key="item">
                                <el-radio-button :label="item.label" :value="item.value" />
                            </el-radio-group>
                            <div class="sex">
                                <el-radio-group size="small" v-model="options.sex" v-for="item in sexOptions"
                                    :key="item">
                                    <el-radio-button :label="item.label" :value="item.value" />
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="other">
                            <span class="title">起卦模式</span>
                            <Select size="small" v-model="options.qiGuaMode" class="select">
                                <Option v-for="item in qiGuaModeOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                        <div v-show="options.qiGuaMode === 1" class="boeder1">
                            <div class="other">
                                <span class="title">数字</span>
                                <el-input size="small" clearable maxlength="3" show-word-limit
                                    v-model.number="options.number" placeholder="请输入一个数字"
                                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')" class="select"></el-input>
                            </div>
                        </div>
                        <div v-show="options.qiGuaMode === 2" class="boeder1">
                            <div class="other">
                                <span class="title">单数</span>
                                <el-input size="small" clearable maxlength="9" show-word-limit
                                    v-model.number="options.danNumber" placeholder="请输入一个数字"
                                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')" class="select"></el-input>
                            </div>
                        </div>
                        <div v-show="options.qiGuaMode === 3" class="boeder1">
                            <div class="other">
                                <span class="title">数字一</span>
                                <el-input size="small" clearable maxlength="9" show-word-limit
                                    v-model.number="options.shuangNumber1" placeholder="请输入数字一"
                                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')" class="select"></el-input>
                            </div>
                            <div class="other">
                                <span class="title">数字二</span>
                                <el-input size="small" clearable maxlength="9" show-word-limit
                                    v-model.number="options.shuangNumber2" placeholder="请输入数字二"
                                    oninput="value=value.replace(/^\.+|[^\d.]/g,'')" class="select"></el-input>
                            </div>
                            <div class="other">
                                <span class="title">双数计算上下卦</span>
                                <Select size="small" v-model="options.shuangNumberInSx" class="select">
                                    <Option v-for="item in shuangNumberInSxOptions" :key="item" :label="item.label"
                                        :value="item.value">
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </div>
                            <div class="other">
                                <span class="title">双数计算动爻</span>
                                <Select size="small" v-model="options.shuangNumberInDong" class="select">
                                    <Option v-for="item in shuangNumberInDongOptions" :key="item" :label="item.label"
                                        :value="item.value">
                                        {{ item.label }}
                                    </Option>
                                </Select>
                            </div>
                        </div>
                        <div class="other">
                            <span class="title">年柱排法</span>
                            <Select size="small" v-model="options.yearGanZhiSet" class="select">
                                <Option v-for="item in yearGanZhiSetOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                        <div class="other">
                            <span class="title">月柱排法</span>
                            <Select size="small" v-model="options.monthGanZhiSet" class="select">
                                <Option v-for="item in monthGanZhiSetOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                        <div class="other">
                            <span class="title">日柱排法</span>
                            <Select size="small" v-model="options.dayGanZhiSet" class="select">
                                <Option v-for="item in dayGanZhiSetOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                        <div class="other">
                            <span class="title">时柱排法</span>
                            <Select size="small" v-model="options.hourGanZhiSet" class="select">
                                <Option v-for="item in hourGanZhiSetOptions" :key="item" :label="item.label"
                                    :value="item.value">
                                    {{ item.label }}
                                </Option>
                            </Select>
                        </div>
                    </div>

                </div>

            </div>

            <div class="yesdata" v-if="isData">

                <div class="option">
                    <Button type="primary" class="button" @click="fanHuiPaiPanMethod">返回排盘</Button>
                    <div class="float-right">
                        <Button type="success" class="button2" @click="jiChuMethod">
                            <b v-if="dataPage === 1">基础信息</b>
                            <span v-else>基础信息</span>
                        </Button>
                        <Button type="success" class="button2" @click="gengDuoMethod">
                            <b v-if="dataPage === 2">更多信息</b>
                            <span v-else>更多信息</span>
                        </Button>
                    </div>
                </div>

                <div class="data">

                    <div class="hrader">
                        <div class="name">
                            <Ellipsis :text="data.name" :length="3" tooltip />
                        </div>
                        <div class="date">
                            <span class="other">（{{ data.sex + '，' + data.zao }}）</span>
                            <span class="item">公历{{ data.solarStr }}</span>
                            <span class="item">农历{{ data.lunarStr }}</span>
                            <span class="item">{{ data.week }}</span>
                            <span class="item">{{ data.season }}</span>
                            <span class="item" v-if="'' !== data.wuBuYuShi">
                                <Tag color="error">{{ data.wuBuYuShi }}</Tag>
                            </span>
                        </div>
                        <div class="shengxiao">
                            {{ data.shengXiao }}
                        </div>
                    </div>

                    <div class="border">

                        <div class="jichu" v-show="dataPage === 1">

                            <div class="row">

                                <div class="title">
                                    <Tag color="default" class="name">本卦：{{ data.benGua }}</Tag>
                                </div>

                                <div class="tip">
                                    <span class="yaoming">爻名</span>
                                    <span class="guaxiang">卦象</span>
                                    <span class="yaoci">爻辞</span>
                                </div>

                                <div class="main">
                                    <div class="yaoming" v-if="data.benGuaLiuYaoName">
                                        <div v-for="index in 6" :key="index">
                                            {{ data.benGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                        </div>
                                    </div>
                                    <div class="guaxiang" v-if="data.benGuaAs">
                                        <div>{{ data.benGuaAs }}</div>
                                    </div>
                                    <div class="yaoci" v-if="data.benGuaLiuYaoYaoCi">
                                        <div v-for="index in 6" :key="index">
                                            <b>{{ data.benGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                        </div>
                                    </div>
                                    <div class="cankao">
                                        <span class="link">
                                            {{ data.benYongTiLink }}
                                        </span>
                                    </div>
                                </div>

                            </div>

                            <div class="row">

                                <div class="title">
                                    <Tag color="default" class="name">变卦：{{ data.bianGua }}</Tag>
                                </div>

                                <div class="tip">
                                    <span class="yaoming">爻名</span>
                                    <span class="guaxiang">卦象</span>
                                    <span class="yaoci">爻辞</span>
                                </div>

                                <div class="main">
                                    <div class="yaoming" v-if="data.bianGuaLiuYaoName">
                                        <div v-for="index in 6" :key="index">
                                            {{ data.bianGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                        </div>
                                    </div>
                                    <div class="guaxiang" v-if="data.bianGuaAs">
                                        <div>{{ data.bianGuaAs }}</div>
                                    </div>
                                    <div class="yaoci" v-if="data.bianGuaLiuYaoYaoCi">
                                        <div v-for="index in 6" :key="index">
                                            <b>{{ data.bianGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                        </div>
                                    </div>
                                    <div class="cankao">
                                        <span class="link">
                                            {{ data.bianYongTiLink }}
                                        </span>
                                    </div>
                                </div>

                            </div>

                            <div class="row">

                                <div class="title">
                                    <Tag color="default" class="name">互卦：{{ data.huGua }}</Tag>
                                </div>

                                <div class="tip">
                                    <span class="yaoming">爻名</span>
                                    <span class="guaxiang">卦象</span>
                                    <span class="yaoci">爻辞</span>
                                </div>

                                <div class="main">
                                    <div class="yaoming" v-if="data.huGuaLiuYaoName">
                                        <div v-for="index in 6" :key="index">
                                            {{ data.huGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                        </div>
                                    </div>
                                    <div class="guaxiang" v-if="data.huGuaAs">
                                        <div>{{ data.huGuaAs }}</div>
                                    </div>
                                    <div class="yaoci" v-if="data.huGuaLiuYaoYaoCi">
                                        <div v-for="index in 6" :key="index">
                                            <b>{{ data.huGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                        </div>
                                    </div>
                                    <div class="cankao">
                                        <span class="link">
                                            {{ data.huYongTiLink }}
                                        </span>
                                    </div>
                                </div>

                            </div>

                            <div class="row">

                                <div class="title">
                                    <Tag color="default" class="name">错卦：{{ data.cuoGua }}</Tag>
                                </div>

                                <div class="tip">
                                    <span class="yaoming">爻名</span>
                                    <span class="guaxiang">卦象</span>
                                    <span class="yaoci">爻辞</span>
                                </div>

                                <div class="main">
                                    <div class="yaoming" v-if="data.cuoGuaLiuYaoName">
                                        <div v-for="index in 6" :key="index">
                                            {{ data.cuoGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                        </div>
                                    </div>
                                    <div class="guaxiang" v-if="data.cuoGuaAs">
                                        <div>{{ data.cuoGuaAs }}</div>
                                    </div>
                                    <div class="yaoci" v-if="data.cuoGuaLiuYaoYaoCi">
                                        <div v-for="index in 6" :key="index">
                                            <b>{{ data.cuoGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                        </div>
                                    </div>
                                    <div class="cankao">
                                        <span class="link">
                                            {{ data.cuoYongTiLink }}
                                        </span>
                                    </div>
                                </div>

                            </div>

                            <div class="row">

                                <div class="title">
                                    <Tag color="default" class="name">综卦：{{ data.zongGua }}</Tag>
                                </div>

                                <div class="tip">
                                    <span class="yaoming">爻名</span>
                                    <span class="guaxiang">卦象</span>
                                    <span class="yaoci">爻辞</span>
                                </div>

                                <div class="main">
                                    <div class="yaoming" v-if="data.zongGuaLiuYaoName">
                                        <div v-for="index in 6" :key="index">
                                            {{ data.zongGuaLiuYaoName[liuYaoIndex[index - 1]] }}
                                        </div>
                                    </div>
                                    <div class="guaxiang" v-if="data.zongGuaAs">
                                        <div>{{ data.zongGuaAs }}</div>
                                    </div>
                                    <div class="yaoci" v-if="data.zongGuaLiuYaoYaoCi">
                                        <div v-for="index in 6" :key="index">
                                            <b>{{ data.zongGuaLiuYaoYaoCi[liuYaoIndex[index - 1]] }}</b>
                                        </div>
                                    </div>
                                    <div class="cankao">
                                        <span class="link">
                                            {{ data.zongYongTiLink }}
                                        </span>
                                    </div>
                                </div>

                            </div>

                        </div>

                        <div class="gengduo" v-if="dataPage === 2">

                            <img class="img" src="@/assets/img/paipan/qidai.png" />

                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>
</template>


<style scoped lang="scss" src="@/css/paipan/meihua.scss"></style>
